import React, { useRef, useState } from 'react';
import { useStore } from '@/store';
import { DeleteFilled } from '@ant-design/icons';
import { Button, message, Modal } from 'antd';
import Editor from 'react-simple-code-editor';
import { highlight, languages } from 'prismjs';
import 'prismjs/components/prism-clike.min';
import 'prismjs/components/prism-javascript.min';
import 'prismjs/themes/prism.css';

import styles from './index.less';

const SlideList = () => {
  const { slideList, currentSlideIndex, setCurrentPresentation, addSlide, deleteSlide } =
    useStore();
  // 单个幻灯片
  const slideListItem = slideList?.[currentSlideIndex - 1] || [];

  const handleDeleteSlide = async (indexs) => {
    if (slideList.length < 2) {
      message.error('至少保留一个幻灯片');
      return;
    }
    try {
      Modal.confirm({
        title: '提示',
        content: (
          <>
            <div>确认是否要删除该幻灯片？</div>
          </>
        ),
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          const newSlideList = [...slideList];
          newSlideList.splice(indexs, 1);
          // 删除完重新排序
          newSlideList.forEach((item, index) => {
            item.sortId = index + 1;
          });
          deleteSlide(newSlideList);
        },
        onCancel: () => {},
      });
    } catch (error) {
      message.error('删除失败');
    }
  };

  // 判断什么语言;python、c、javascript
  const detectLanguage = (code) => {
    // Simple language detection based on common patterns
    const pythonPatterns = [/^#!/, /\bdef\b/, /\bprint\(/, /\bimport\b.*\n/, /:\s*$/m];

    const cPatterns = [
      /#include/,
      /int\s+main\s*\(/,
      /printf\s*\(/,
      /scanf\s*\(/,
      /void\s+\w+\s*\(/,
    ];

    const jsPatterns = [/const\s+/, /let\s+/, /function\s+/, /=>/, /console\.log/];

    let pythonScore = 0;
    let cScore = 0;
    let jsScore = 0;

    pythonPatterns.forEach((pattern) => {
      if (pattern.test(code)) pythonScore++;
    });

    cPatterns.forEach((pattern) => {
      if (pattern.test(code)) cScore++;
    });

    jsPatterns.forEach((pattern) => {
      if (pattern.test(code)) jsScore++;
    });

    if (pythonScore > cScore && pythonScore > jsScore) return 'Python';
    if (cScore > pythonScore && cScore > jsScore) return 'C';
    return 'JavaScript';
  };

  return (
    <div className={styles['slide-list-wrap']}>
      {slideList?.map((items, indexs) => {
        return (
          <>
            <div
              key={items.id}
              style={{
                width: 224,
                height: 114,
                marginBottom: 20,
                marginLeft: 20,
                marginRight: 10,
                border: '1px solid #e8e8e8',
                position: 'relative',
              }}
              className={`${styles['slide-item-wrap']} ${
                styles[`${items.sortId === currentSlideIndex ? 'active' : ''}`]
              }`}
              onClick={() => {
                setCurrentPresentation(items.sortId);
              }}
            >
              <div
                style={{
                  position: 'absolute',
                  top: 0,
                  left: 0,
                  width: 220,
                  height: 110,
                  background: 'red',
                  opacity: 0,
                  zIndex: 2,
                }}
              />
              <div
                className={styles['icon-delete']}
                onClick={(e) => {
                  e.stopPropagation();
                  e.preventDefault();
                  handleDeleteSlide(indexs);
                }}
              >
                <DeleteFilled />
              </div>
              <div
                className={styles['slide-content']}
                style={{
                  transform: 'scale(0.2)',
                  marginTop: -220,
                  marginLeft: -440,
                }}
              >
                {items?.elements?.map((item) => {
                  // 文本
                  if (item.type === 'Text') {
                    return (
                      <div
                        className={styles['slide-item']}
                        key={item?.id}
                        style={{
                          border: '1px solid #e8e8e8',
                          color: item?.fontColor || '#000000',
                          fontSize: `${item?.fontSize || 18}em`,
                          fontWeight: item?.fontWight || 800,
                          width: item?.blockWidth || 300,
                          height: item?.blockHeight || 300,
                          overflow: 'hidden',
                        }}
                      >
                        {item?.content}
                      </div>
                    );
                  }
                  // 图片
                  if (item.type === 'Image') {
                    return (
                      <div className={styles['slide-item']} key={item.id}>
                        <img
                          style={{
                            width: item?.blockWidth || 300,
                            height: item?.blockHeight || 200,
                          }}
                          src={item?.imageUrl}
                          alt={item?.describe}
                          onError={(e) => {
                            const target = e.target;
                            target.src =
                              'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>';
                          }}
                        />
                      </div>
                    );
                  }
                  // 视频
                  if (item.type === 'Video') {
                    return (
                      <div className={styles['slide-item']} key={item.id}>
                        <video
                          style={{
                            border: '1px solid #e8e8e8',
                            verticalAlign: 'middle',
                            objectFit: 'fill',
                          }}
                          width={item?.blockWidth || 500}
                          height={item?.blockHeight || 250}
                          controls
                          // 阻止默认的双击全屏行为
                          controlsList="nofullscreen"
                        >
                          <source src={item?.videoUrl || 250} type="video/mp4" />
                          Your browser does not support the video tag.
                        </video>
                      </div>
                    );
                  }
                  // 代码
                  if (item.type === 'Code') {
                    return (
                      <div className={styles['slide-item']} key={item.id}>
                        <div className={styles['slide-item']} key={item.id}>
                          <div
                            className={styles['code-body']}
                            style={{
                              backgroundColor:
                                detectLanguage(item?.content) === 'Python'
                                  ? '#eef6ff'
                                  : detectLanguage(item?.content) === 'JavaScript'
                                  ? '#fefce8'
                                  : '#fbf5ff',
                            }}
                          >
                            <div className={styles['code-title']}>
                              {detectLanguage(item?.content)}
                            </div>
                            <Editor
                              className={styles['code-content']}
                              value={item?.content}
                              highlight={(code) => highlight(code, languages.js, 'javascript')}
                              padding={4}
                              style={{
                                fontFamily: '"Fira code", "Fira Mono", monospace',
                                fontSize: item?.fontSize * 16 || 12,
                              }}
                              readOnly
                            />
                          </div>
                        </div>
                      </div>
                    );
                  }
                  return null;
                })}
              </div>
            </div>
          </>
        );
      })}
      <div
        style={{
          position: 'fixed',
          bottom: 10,
          left: 10,
          // background: 'red',
          width: 250,
          height: 36,
          textAlign: 'center',
        }}
      >
        <Button
          type="text"
          onClick={() => {
            addSlide();
          }}
        >
          +新增幻灯片
        </Button>
      </div>
    </div>
  );
};

export default SlideList;
